
<template>
<!-- div 该文件首字母大写 -->
  <div class="gobang-bg">
    <div class="login-container">
      <h2 class="login-title">用户登录</h2>
      <i class="login-icon">&#x2715;</i>
      <form class="login-form">
        <input
          type="text"
          placeholder="用户名或Id账号"
          class="login-input"
          v-model="username"
          autocomplete="username"
          ref="usernameRef"
          @keydown="handleKeydown"
        />
        <input
          type="password"
          placeholder="密码"
          class="login-input"
          v-model="pwd"
          autocomplete="current-password"
          ref="pwdRef"
          @keydown="handleKeydown"
        />
        <button
          type="button"
          class="login-btn"
          @click="login()"
          :disabled="loading"
        >
          {{ loading ? "登录中..." : "登录" }}
        </button>
        <div class="login-b">
          <!-- <input type="checkbox" id="remember" name="remember" value="1" />
          <label for="remember">记住我</label> -->
          <input type="checkbox" id="read" name="read" v-model="read" />
          <label for="read" class="login-link-read"
            >已阅读并同意<a href="/login/protocol">《用户协议》</a>和<a
              href="/login/protocol"
              >《隐私条款》</a
            ></label
          >
        </div>
        <a href="/login/reg" class="login-link" id="reg">
          <span class="reg">没有账号？</span>
          去注册</a
        >
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import useNetStore from "../stores/net.js";
import md5 from "blueimp-md5";
import { useUserStore } from "../stores/user";
let userStore = useUserStore();
const net = useNetStore();

const username = ref("");
const pwd = ref("");
const read = ref(false);
const loading = ref(false);

const usernameRef = ref(null);
const pwdRef = ref(null);

onMounted(() => {
  // 页面加载完成后，自动聚焦到用户名输入框
  usernameRef.value.focus();
});
// 回车切换输入框或登录
function handleKeydown(e) {
  if (e.key === "Enter") {
    if (document.activeElement === usernameRef.value) {
      pwdRef.value.focus();
    } else if (document.activeElement === pwdRef.value) {
      login();
    }
  }
}

// 登录功能
const login = () => {
  if (username.value === "" || pwd.value === "") {
    return alert("用户名或密码不能为空！");
  }
  if (read.value === false) {
    return confirm("是否勾选选用户协议和隐私条款？")
      ? (read.value = true)
      : false;
  }
  loading.value = true;
  // 加密密码
  const encrypted = md5(pwd.value);

  // console.log(username.value,pwd.value);
  net
    .fasong(
      {
        username: username.value,
        pwd: encrypted,
      },
      "/users/login"
    )
    .then((res) => {
      console.log(res);
      if (res.code === 200) {
        // localStorage.setItem('token', res.data.token)
        alert("登录成功");
        userStore.user = res.data;
        // 清空输入框
        username.value = "";
        pwd.value = "";
        if (res.data.role === 1) {
          window.location.href = "/admin"; // 管理员跳转到后台
        } else {
          window.location.href = "/"; // 普通用户跳转到首页
        }
      } else {
        alert(res.msg || "登录失败");
        loading.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
      loading.value = false;
    });
};
</script>

<style scoped>
* {
  /* 文本不可选中 */
  user-select: none;
}

/* 动画关键帧 */
@keyframes move-bg-1 {
  0% {
    background: repeating-linear-gradient(
        45deg,
        rgb(254, 254, 254) 0 40px,
        rgba(255, 255, 255, 0.1) 40px 80px
      ),
      repeating-linear-gradient(
        135deg,
        rgb(239, 162, 174) 0 40px,
        rgba(255, 255, 255, 1) 40px 80px
      );
  }

  50% {
    background: repeating-linear-gradient(
        60deg,
        #aeefff 0 40px,
        #e0ffe0 40px 80px
      ),
      repeating-linear-gradient(120deg, #67c23a 0 40px, #ffffff00 40px 80px);
  }

  100% {
    background: repeating-linear-gradient(
        90deg,
        #222 0 40px,
        #ffd70022 40px 80px
      ),
      repeating-linear-gradient(180deg, #ffd700 0 40px, #2220 40px 80px);
  }
}

@keyframes move-bg-2 {
  0% {
    background: repeating-linear-gradient(
        90deg,
        #222 0 40px,
        #ffd70022 40px 80px
      ),
      repeating-linear-gradient(180deg, #ffd700 0 40px, #2220 40px 80px);
  }

  10% {
    background: repeating-linear-gradient(
        60deg,
        #aeefff 0 40px,
        #e0ffe0 40px 80px
      ),
      repeating-linear-gradient(120deg, #67c23a 0 40px, #ffffff00 40px 80px);
  }

  100% {
    background-position: 160px 0, 0 160px;
  }
}

@keyframes move-bg-3 {
  0% {
    background: repeating-linear-gradient(
        60deg,
        #aeefff 0 40px,
        #e0ffe0 40px 80px
      ),
      repeating-linear-gradient(120deg, #67c23a 0 40px, #ffffff00 40px 80px);
  }

  100% {
    background-position: -160px 160px, 160px -160px;
  }
}

.gobang-bg {
  min-height: 100vh;
  min-width: 100vw;
  background: repeating-linear-gradient(
      45deg,
      rgb(161, 241, 234) 0 40px,
      rgb(255, 255, 255, 0.1) 40px 80px
    ),
    repeating-linear-gradient(
      135deg,
      rgb(239, 162, 174) 0 40px,
      rgba(255, 255, 255, 1) 40px 80px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  /* opacity: 0.5; */
  backdrop-filter: blur(12000px);
  /* animation: move-bg-1 5s linear infinite; */
}

.login-container {
  position: relative;
  width: 370px;
  padding: 48px 36px 36px 36px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(60, 60, 60, 0.18);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 20px;
  color: #409eff;
  cursor: pointer;
  transition: color 0.2s;
  z-index: 2;
}

.login-icon:hover {
  color: #67c23a;
}

.login-title {
  margin-bottom: 32px;
  color: #222;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-input {
  padding: 14px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.04);
}

.login-input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
  background: #fff;
}

.login-btn {
  padding: 14px;
  background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 2px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-btn:hover {
  background: linear-gradient(90deg, #67c23a 0%, #409eff 100%);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
  color: #222;
}

.login-b {
  margin-left: -95px;
  font-size: 14px;
}

.login-b #remember {
  transform: scale(1.2);
}

.login-b label {
  margin-left: 5px;
  margin-right: 5px;
  color: #666;
}

.login-b #read {
  margin-left: 50px;
  cursor: pointer;
  transform: scale(1.2);
}

.login-b label.login-link-read {
  font-size: 12px;
}

.reg {
  color: #666;
  cursor: pointer;
}

.reg:hover {
  /* 下划线 */
  text-decoration: underline;
}
</style>
